<template>
  <nav class="head">
    <div class="head-limit">
      <div class="head-logo">
        <img src="@/assets/logoHead.png" alt="">
      </div>
      <ul class="head-container">
        <li class="head-container-index el-icon-info">首页</li>
        <li class="head-container-download el-icon-third-phone">下载App</li>
        <li class="head-container-search">
          <input type="text" class="head-container-search-input" placeholder="搜索">
          <span class="head-container-search-icon el-icon-search" />
        </li>
      </ul>
      <div class="head-login">
        <div class="head-login-wirte el-icon-third-Feather" @click="writeArticle">写文章</div>
        <div v-show="false">
          <div class="head-login-register" @click="login('register')">注册</div>
          <div class="head-login-login" @click="login('login')">登录</div>
        </div>
        <!-- <div class="head-login-color">颜色</div> -->
        <div class="head-login-user" @mouseenter="openMenu" @mouseleave="closeMenu">
          <img :src="userAvatar" alt="">
          <svg-icon icon-class="san" class="btnss" />
          <div v-show="menu" class="head-login-user-menu">
            <ul>
              <li class="el-icon-third-user">
                <span class="head-login-user-word">我的主页</span>
              </li>
              <li class="el-icon-third-shuqian">
                <span class="head-login-user-word">收藏的文章</span>
              </li>
              <li class="el-icon-third-heart">
                <span class="head-login-user-word">喜欢的文章</span>
              </li>
              <li class="el-icon-third-qianbao">
                <span class="head-login-user-word">我的钱包</span>
              </li>
              <li class="el-icon-third-setting">
                <span class="head-login-user-word">设置</span>
              </li>
              <li class="el-icon-third-message">
                <span class="head-login-user-word">帮助与反馈</span>
              </li>
              <li class="el-icon-third-tuichu" @click="logOut">
                <span class="head-login-user-word">退出</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>
<script>
import { mapGetters } from 'vuex'
import store from '@/store'
export default {
  name: 'HeadIndex',
  components: {
  },
  data() {
    return {
      menu: false
    }
  },
  computed: {
    ...mapGetters(['name', 'userAvatar'])
  },
  mounted() {
  },
  methods: {
    // 登录页面
    login(boo) {
      this.$router.push({
        path: '/login/' + boo
      })
    },
    // 打开菜单
    openMenu() {
      this.menu = !this.menu
    },
    // 关闭菜单
    closeMenu() {
      this.menu = !this.menu
    },
    // 退出
    logOut() {
      store.dispatch('LogOut').then(() => {
        this.$router.push({
          path: '/login/true'
        })
      })
    },
    // 写文章
    writeArticle() {
      this.$router.push({
        path: '/writeArticle'
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  // 头部
  .head
    height: 56px
    position: fixed
    top: 0
    left: 0
    right: 0
    background-color: #ffffff
    border-color: #f0f0f0
    border: 1px solid #f0f0f0
    z-index: 2000
    // 头部居中
    .head-limit
      min-width: 768px
      max-width: 1440px
      height: 56px
      margin: 0 auto
      position: relative
      // 头部左侧logo
      .head-logo
        display: inline-block
        float: left
        & img
          height: 56px
      // 头部中间区域
      @media (min-width: 1081px)
        .head-container
          width: 960px
      @media (min-width: 768px)
        .head-container
          width: 750px
      @media (min-width: 992px)
        .head-container
          width: 960px
      .head-container
        height: 56px
        line-height: 40px
        margin: 0 auto
        float: left
        // 头部中间首页
        .head-container-index
          color: #ea6f5a
          margin-left: 10%
          margin-right: 20px
          letter-spacing: 1px
          cursor: pointer
          &::before
            margin-right: 5px
        // 下载块
        .head-container-download
          user-select: none
          padding: 15px
          line-height: 26px
          cursor: pointer
          &::before
            margin-right: 5px
          &:hover
            background-color: rgba(238,238,238,0.5)
        .head-container-search
          list-style-type: none
          width: 340px
          display: inline-block
          padding-left: 20px
          font-size: 14px
          position: relative
          .head-container-search-input
            background: #eee
            height: 38px
            border-radius: 40px
            border: 1px solid #eee
            padding: 0 40px 0 20px
            outline:none
            color: rgba(51,51,51,0.8)
          .head-container-search-icon
            position: absolute
            left: 221px
            top: 10px
            color: rgba(51,51,51,0.7)
            cursor: pointer
            font-size: 19px
      // 头部登录大块
      .head-login
        user-select: none;
        position: absolute
        width: 350px
        right: 5%
        top: 0
        height: 56px
        // 头部注册
        .head-login-register
          padding-top: 8px
          float: right
          margin-right: 20px
          color: #ea6f5a
          border: 1px solid #ea6f5a
          line-height: 38px
          width: 80px
          border-radius: 22px
          font-size: 15px
          text-align: center
          cursor: pointer
          &:hover
            background-color: rgba(243,95,70,.1)
        // 头部登录
        .head-login-login
          padding-top: 8px
          float: right
          margin-right: 30px
          color: #969696
          font-size: 15px
          line-height: 40px
          cursor: pointer
        // 头部颜色按钮
        .head-login-color
          float: right
          padding-top: 8px
          margin-right: 30px
          color: #969696
          font-size: 15px
          line-height: 40px
          cursor: pointer
        // 登陆后
        .head-login-user
          float: right
          width: 76px
          margin-right: 30px
          position: relative
          height: 100%
          display: flex
          align-items: center
          justify-content: center
          & img
            border-radius: 50%
            width: 60%
            margin: 0 30px 0 20px
          &:hover
            background: #f5f5f5
            cursor: pointer
          .btnss
            position: absolute
            top: 30%
            font-size: 18px
            color: #999
            right: 0px
          .head-login-user-menu
            background: #fff
            position: absolute
            width: 200%
            top: 55px
            left: 0px
            border: 1px solid rgba(0,0,0,.1)
            box-shadow: 0 3px 18px rgba(0,0,0,.1)
            & ul
              width: 100%
              padding: 10px 0
              list-style-type: none
              margin: 0 auto
              & li
                color: red
                display: block
                text-align: left
                color: #333
                font-size: 15px
                line-height: 50px
                color: #ea6f5a
                padding-left: 20px
                font-size: 18px
                &:hover
                  background: #f5f5f5
          .head-login-user-word
            margin-left: 10px
            color: #333
            font-size: 15px
        // 头部写文章
        .head-login-wirte
          float: right
          margin-top: 8px
          background-color: #ea6f5a
          width: 100px
          font-size: 15px
          text-align: center
          line-height: 40px
          color: #fff
          border-radius: 20px
          cursor: pointer
          &:hover
            background-color: rgba(250,95,70,1)
          &::before
            margin-right: 5px
</style>
